<template>
  <div class="user-create">
    <!-- 头部导航 -->
    <el-card class="header-card" shadow="hover">
      <div class="header-content">
        <div class="header-left">
          <el-button type="primary" @click="goBack" plain>
            <el-icon><ArrowLeft /></el-icon>
            返回列表
          </el-button>
          <el-divider direction="vertical" />
          <el-icon class="header-icon"><UserFilled /></el-icon>
          <span class="header-title">新增用户</span>
        </div>
        <div class="header-actions">
          <el-steps :active="currentStep" align-center class="header-steps">
            <el-step title="基本信息" icon="User" />
            <el-step title="角色权限" icon="Key" />
            <el-step title="完成创建" icon="Check" />
          </el-steps>
        </div>
      </div>
    </el-card>

    <el-row :gutter="20">
      <!-- 主要表单区域 -->
      <el-col :span="16">
        <el-card class="form-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon><DocumentAdd /></el-icon>
              <span>{{ stepTitles[currentStep] }}</span>
              <div class="step-indicator">
                步骤 {{ currentStep + 1 }} / {{ stepTitles.length }}
              </div>
            </div>
          </template>

          <!-- 步骤内容 -->
          <div class="step-content">
            <!-- 步骤1: 基本信息 -->
            <div v-show="currentStep === 0" class="step-form">
              <el-form
                ref="basicFormRef"
                :model="form"
                :rules="basicRules"
                label-width="120px"
                label-position="top"
                class="user-form"
              >
                <!-- 登录信息 -->
                <div class="form-section">
                  <div class="section-title">
                    <el-icon><Lock /></el-icon>
                    <span>登录信息</span>
                  </div>
                  
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="用户名" prop="username">
                        <el-input
                          v-model="form.username"
                          placeholder="请输入用户名"
                          prefix-icon="User"
                          clearable
                          autocomplete="off"
                          @blur="checkUsername"
                        />
                        <div class="form-tip">用户名创建后不可修改，建议使用英文字母</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="初始密码" prop="password">
                        <el-input
                          v-model="form.password"
                          type="password"
                          placeholder="请输入初始密码"
                          prefix-icon="Lock"
                          show-password
                          clearable
                          autocomplete="new-password"
                        />
                        <div class="form-tip">长度6-20位，包含字母和数字</div>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input
                      v-model="form.confirmPassword"
                      type="password"
                      placeholder="请再次输入密码"
                      prefix-icon="Lock"
                      show-password
                      clearable
                      autocomplete="new-password"
                      style="width: 50%;"
                    />
                  </el-form-item>
                </div>

                <!-- 个人信息 -->
                <div class="form-section">
                  <div class="section-title">
                    <el-icon><User /></el-icon>
                    <span>个人信息</span>
                  </div>
                  
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="手机号" prop="mobile">
                        <el-input
                          v-model="form.mobile"
                          placeholder="请输入手机号"
                          prefix-icon="Phone"
                          clearable
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="邮箱" prop="email">
                        <el-input
                          v-model="form.email"
                          placeholder="请输入邮箱地址"
                          prefix-icon="Message"
                          clearable
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-form-item label="用户头像" prop="avatar">
                    <div class="avatar-upload">
                      <el-upload
                        class="avatar-uploader"
                        action="#"
                        :show-file-list="false"
                        :before-upload="beforeAvatarUpload"
                        :http-request="handleAvatarUpload"
                        accept="image/*"
                      >
                        <el-avatar
                          v-if="form.avatar"
                          :src="form.avatar"
                          :size="60"
                          class="avatar-preview"
                        />
                        <div v-else class="avatar-placeholder">
                          <el-icon class="avatar-uploader-icon"><User /></el-icon>
                          <div class="upload-text">点击上传头像</div>
                        </div>
                      </el-upload>
                      <div class="avatar-tips">
                        <p>支持 JPG、PNG 格式</p>
                        <p>文件大小不超过 2MB</p>
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </el-form>
            </div>

            <!-- 步骤2: 角色权限 -->
            <div v-show="currentStep === 1" class="step-form">
              <el-form
                ref="roleFormRef"
                :model="form"
                :rules="roleRules"
                label-width="120px"
                label-position="top"
                class="user-form"
              >
                <!-- 角色分配 -->
                <div class="form-section">
                  <div class="section-title">
                    <el-icon><UserFilled /></el-icon>
                    <span>角色分配</span>
                  </div>
                  
                                     <el-form-item label="选择角色" prop="roleId">
                     <div class="custom-radio-group">
                       <div
                         v-for="role in roleOptions"
                         :key="role.id"
                         class="custom-role-option"
                         :class="{ 'selected': form.roleId === role.id }"
                         @click="form.roleId = role.id"
                       >
                         <div class="radio-dot">
                           <div v-if="form.roleId === role.id" class="radio-dot-inner"></div>
                         </div>
                         <div class="role-card">
                           <div class="role-header">
                             <span class="role-name">{{ role.name }}</span>
                             <el-tag size="small" type="info">角色ID: {{ role.id }}</el-tag>
                           </div>
                         </div>
                       </div>
                     </div>
                   </el-form-item>
                </div>

                <!-- 客户分配 -->
                <div class="form-section">
                  <div class="section-title">
                    <el-icon><OfficeBuilding /></el-icon>
                    <span>客户分配</span>
                  </div>
                  
                  <el-form-item label="所属客户" prop="customerId">
                    <el-select
                      v-model="form.customerId"
                      placeholder="请选择客户（系统管理员可不选择）"
                      style="width: 100%;"
                      clearable
                      :disabled="isSystemAdmin"
                    >
                      <el-option
                        v-for="customer in customerOptions"
                        :key="customer.id"
                        :label="customer.name"
                        :value="customer.id"
                      >
                        <div class="customer-option">
                          <span class="customer-name">{{ customer.name }}</span>
                          <span class="customer-code">{{ customer.code }}</span>
                        </div>
                      </el-option>
                    </el-select>
                    <div class="form-tip" v-if="isSystemAdmin">
                      系统管理员无需选择客户
                    </div>
                  </el-form-item>
                </div>

                <!-- 状态设置 -->
                <div class="form-section">
                  <div class="section-title">
                    <el-icon><Setting /></el-icon>
                    <span>状态设置</span>
                  </div>
                  
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="账户状态" prop="status">
                        <el-radio-group v-model="form.status">
                          <el-radio label="enabled">
                            <el-tag type="success" size="small">启用</el-tag>
                            <span style="margin-left: 8px;">用户可以正常登录</span>
                          </el-radio>
                          <el-radio label="disabled">
                            <el-tag type="danger" size="small">禁用</el-tag>
                            <span style="margin-left: 8px;">用户无法登录</span>
                          </el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-form>
            </div>

            <!-- 步骤3: 确认信息 -->
            <div v-show="currentStep === 2" class="step-form">
              <div class="confirm-section">
                <div class="confirm-title">
                  <el-icon><Check /></el-icon>
                  <span>请确认用户信息</span>
                </div>
                
                <el-descriptions :column="2" border size="large">
                  <el-descriptions-item label="用户名">
                    <span class="confirm-value">{{ form.username }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="手机号">
                    <span class="confirm-value">{{ form.mobile || '-' }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="用户头像">
                    <el-avatar
                      v-if="form.avatar"
                      :src="form.avatar"
                      :size="40"
                    />
                    <span v-else class="confirm-value">未设置头像</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="邮箱">
                    <span class="confirm-value">{{ form.email || '-' }}</span>
                  </el-descriptions-item>

                  <el-descriptions-item label="角色">
                    <el-tag type="primary" size="small">
                      {{ currentRoleName }}
                    </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="所属客户">
                    <span class="confirm-value">
                      {{ currentCustomerName || '系统用户' }}
                    </span>
                  </el-descriptions-item>
                  <el-descriptions-item label="状态" :span="2">
                    <el-tag :type="form.status === 'enabled' ? 'success' : 'danger'" size="small">
                      {{ form.status === 'enabled' ? '启用' : '禁用' }}
                    </el-tag>
                  </el-descriptions-item>
                </el-descriptions>

                <div class="confirm-tips">
                  <el-alert
                    title="创建提示"
                    type="info"
                    :closable="false"
                    show-icon
                  >
                    <p>• 用户创建后将自动分配默认权限</p>
                    <p>• 初始密码为您设置的密码，建议用户首次登录后修改</p>
                    <p>• 可在用户管理页面随时编辑用户信息</p>
                  </el-alert>
                </div>
              </div>
            </div>
          </div>

          <!-- 步骤操作按钮 -->
          <div class="step-actions">
            <el-button v-if="currentStep > 0" @click="prevStep">
              <el-icon><ArrowLeft /></el-icon>
              上一步
            </el-button>
            <el-button v-if="currentStep < 2" type="primary" @click="nextStep">
              下一步
              <el-icon><ArrowRight /></el-icon>
            </el-button>
            <el-button
              v-if="currentStep === 2"
              type="success"
              @click="handleSubmit"
              :loading="submitLoading"
            >
              <el-icon><Check /></el-icon>
              创建用户
            </el-button>
            <el-button @click="goBack">
              <el-icon><Close /></el-icon>
              取消
            </el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 侧边预览和帮助 -->
      <el-col :span="8">
        <!-- 用户预览 -->
        <el-card class="preview-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon><View /></el-icon>
              <span>用户预览</span>
            </div>
          </template>
          
          <div class="user-preview">
            <el-avatar
              :size="80"
              class="preview-avatar"
            >
              {{ form.username?.charAt(0) || 'U' }}
            </el-avatar>
            
            <div class="preview-info">
              <h4>{{ form.username || '新用户' }}</h4>
              <p class="preview-username">@{{ form.username || 'username' }}</p>
              <p class="preview-role">{{ currentRoleName || '未分配角色' }}</p>
              
              <div class="preview-tags">
                <el-tag :type="form.status === 'enabled' ? 'success' : 'danger'" size="small">
                  {{ form.status === 'enabled' ? '启用' : '禁用' }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 创建帮助 -->
        <el-card class="help-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon><QuestionFilled /></el-icon>
              <span>创建帮助</span>
            </div>
          </template>
          
          <div class="help-content">
            <div v-if="currentStep === 0" class="help-step">
              <h5>基本信息填写</h5>
              <ul>
                <li>用户名必须唯一，建议使用英文</li>
                <li>密码长度6-20位，需包含字母和数字</li>
                <li>真实姓名用于系统显示</li>
                <li>邮箱和手机号用于找回密码</li>
              </ul>
            </div>
            <div v-if="currentStep === 1" class="help-step">
              <h5>角色权限设置</h5>
              <ul>
                <li>角色决定用户可以访问的功能</li>
                <li>系统管理员拥有所有权限</li>
                <li>客户用户只能管理所属客户的数据</li>
                <li>可以后续修改用户角色</li>
              </ul>
            </div>
            <div v-if="currentStep === 2" class="help-step">
              <h5>确认并创建</h5>
              <ul>
                <li>请仔细核对用户信息</li>
                <li>创建后可在用户管理页面编辑</li>
                <li>用户将收到账户信息通知</li>
                <li>建议提醒用户首次登录后修改密码</li>
              </ul>
            </div>
          </div>
        </el-card>


      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  ArrowLeft, UserFilled, DocumentAdd, Lock, User, Male, Female, OfficeBuilding,
  Setting, Check, ArrowRight, Close, View, QuestionFilled
} from '@element-plus/icons-vue';
import UserAPI from '@/api/system/user.api';
import FileAPI from '@/api/system/file.api';

const router = useRouter();

// 步骤控制
const currentStep = ref(0);
const stepTitles = ['基本信息', '角色权限', '确认创建'];

// 表单引用
const basicFormRef = ref();
const roleFormRef = ref();

// 加载状态
const submitLoading = ref(false);

// 表单数据
const form = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  mobile: '',
  email: '',
  avatar: '',
  roleId: null,
  customerId: null,
  status: 'enabled',
});

// 选项数据
const roleOptions = ref([]);
const customerOptions = ref([]);



// 表单验证规则
const basicRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度为3-20位', trigger: 'blur' },
    { pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/, message: '用户名必须以字母开头，只能包含字母、数字和下划线', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度为6-20位', trigger: 'blur' },
    { pattern: /^(?=.*[a-zA-Z])(?=.*\d).+$/, message: '密码必须包含字母和数字', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.password) {
          callback(new Error('两次输入密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  mobile: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
};

const roleRules = {
  roleId: [
    { required: true, message: '请选择角色', trigger: 'change' }
  ],
  customerId: [
    {
      validator: (rule, value, callback) => {
        // 如果是系统管理员，不需要验证客户ID
        const role = roleOptions.value.find(r => r.id === form.roleId);
        if (role && (role.name === 'admin' || role.name === '系统管理员' || role.name === 'ADMIN')) {
          callback();
          return;
        }
        // 非系统管理员必须选择客户
        if (!value) {
          callback(new Error('请选择所属客户'));
        } else {
          callback();
        }
      },
      trigger: 'change'
    }
  ]
};

// 计算属性
const currentRoleName = computed(() => {
  const role = roleOptions.value.find(r => r.id === form.roleId);
  return role?.name || '';
});

const currentCustomerName = computed(() => {
  const customer = customerOptions.value.find(c => c.id === form.customerId);
  return customer?.name || '';
});

const isSystemAdmin = computed(() => {
  const role = roleOptions.value.find(r => r.id === form.roleId);
  return role?.name === 'admin' || role?.name === '系统管理员' || role?.name === 'ADMIN';
});

// 监听角色变化
watch(() => form.roleId, (newRoleId) => {
  const role = roleOptions.value.find(r => r.id === newRoleId);
  if (role && (role.name === 'admin' || role.name === '系统管理员' || role.name === 'ADMIN')) {
    form.customerId = null;
  }
});



// 检查用户名是否可用
const checkUsername = async () => {
  if (!form.username) return;
  
  try {
    // 这里可以调用检查用户名的API
    // const res = await UserAPI.checkUsername(form.username);
    // 模拟检查
    console.log('检查用户名:', form.username);
  } catch (error) {
    console.error('检查用户名失败:', error);
  }
};

// 步骤操作
const nextStep = async () => {
  try {
    if (currentStep.value === 0) {
      await basicFormRef.value?.validate();
    } else if (currentStep.value === 1) {
      await roleFormRef.value?.validate();
    }
    currentStep.value++;
  } catch (error) {
    console.log('表单验证失败');
  }
};

const prevStep = () => {
  currentStep.value--;
};



// 加载角色列表
const loadRoles = async () => {
  try {
    const res = await UserAPI.getRoles();
    roleOptions.value = res.data || res || [];
  } catch (error) {
    console.error('加载角色列表失败:', error);
  }
};

// 加载客户列表
const loadCustomers = async () => {
  try {
    const res = await UserAPI.getCustomers();
    customerOptions.value = res.data || res || [];
  } catch (error) {
    console.error('加载客户列表失败:', error);
  }
};

// 提交表单
const handleSubmit = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要创建新用户吗？',
      '创建确认',
      {
        confirmButtonText: '确定创建',
        cancelButtonText: '取消',
        type: 'info',
      }
    );
    
    submitLoading.value = true;
    
    const { confirmPassword, ...submitData } = form;
    
    // 确保传递给后端的数据结构正确
    const userData = {
      username: submitData.username,
      password: submitData.password,
      mobile: submitData.mobile,
      email: submitData.email,
      avatar: submitData.avatar,
      status: submitData.status,
    };
    
    // 系统管理员可以不设置 customerId，其他角色必须设置
    const role = roleOptions.value.find(r => r.id === form.roleId);
    if (role && (role.name === 'admin' || role.name === '系统管理员' || role.name === 'ADMIN')) {
      // 系统管理员可以不设置 customerId
      if (submitData.customerId) {
        userData.customerId = submitData.customerId;
      }
    } else {
      // 非系统管理员必须设置 customerId
      userData.customerId = submitData.customerId;
    }
    
    // 添加角色信息
    userData.roleIds = [submitData.roleId];
    
    await UserAPI.create(userData);
    
    ElMessage.success('用户创建成功');
    router.push({ path: '/system/user/index' });
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('创建失败: ' + (error.message || error));
    }
  } finally {
    submitLoading.value = false;
  }
};

// 头像上传前的验证
const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    ElMessage.error('只能上传图片格式的文件!');
    return false;
  }
  if (!isLt2M) {
    ElMessage.error('上传文件大小不能超过 2MB!');
    return false;
  }
  return true;
};

// 头像上传处理
const handleAvatarUpload = async (options) => {
  const { file } = options;
  
  try {
    // 显示上传中状态
    ElMessage.info('正在上传头像到七牛云...');
    
    // 调用文件上传API
    const result = await FileAPI.uploadToQiniu(file);
    
    // 因为request拦截器在成功时只返回data字段，所以result直接就是URL字符串
    if (result && typeof result === 'string' && result.startsWith('http')) {
      // 上传成功，保存七牛云返回的URL
      form.avatar = result;
      ElMessage.success('头像上传成功');
      console.log('头像URL已设置:', result);
    } else {
      console.error('头像上传失败，返回结果:', result);
      ElMessage.error('头像上传失败');
    }
  } catch (error) {
    console.error('头像上传错误:', error);
    ElMessage.error('头像上传失败: ' + (error.message || error));
  }
};

// 重置表单
const resetForm = () => {
  Object.assign(form, {
    username: '',
    password: '',
    confirmPassword: '',
    mobile: '',
    email: '',
    avatar: '',
    roleId: null,
    customerId: null,
    status: 'enabled',
  });
  
  // 重置步骤
  currentStep.value = 0;
  
  // 清除表单验证状态
  if (basicFormRef.value) {
    basicFormRef.value.clearValidate();
  }
  if (roleFormRef.value) {
    roleFormRef.value.clearValidate();
  }
};

// 返回列表
const goBack = () => {
  router.push({ path: '/system/user/index' });
};

// 初始化
onMounted(() => {
  // 每次进入页面都重置表单
  resetForm();
  
  Promise.all([
    loadRoles(),
    loadCustomers()
  ]);
});
</script>

<style scoped>
.user-create {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-icon {
  font-size: 18px;
  color: #409eff;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.header-steps {
  margin: 0;
}

.form-card {
  border-radius: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #333;
}

.card-header > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-header .el-icon {
  font-size: 16px;
  color: #409eff;
}

.step-indicator {
  font-size: 12px;
  color: #909399;
  background: #f5f7fa;
  padding: 4px 8px;
  border-radius: 4px;
}

.step-content {
  min-height: 500px;
  padding: 20px 0;
}

.user-form {
  max-width: 800px;
}

.form-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.section-title .el-icon {
  color: #409eff;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

/* 自定义 radio 组样式 */
.custom-radio-group {
  width: 100%;
}

.custom-role-option {
  display: flex;
  align-items: flex-start;
  margin: 10px 0;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-role-option:hover {
  opacity: 0.8;
}

.custom-role-option.selected .role-card {
  border-color: #409eff;
  background: #f0f9ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

/* 自定义 radio 圆点 */
.radio-dot {
  width: 14px;
  height: 14px;
  border: 1px solid #dcdfe6;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.3s ease;
}

.custom-role-option.selected .radio-dot {
  border-color: #409eff;
}

.radio-dot-inner {
  width: 6px;
  height: 6px;
  background: #409eff;
  border-radius: 50%;
}

.role-card {
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  padding: 15px;
  background: white;
  transition: all 0.3s ease;
  width: 100%;
  margin: 0;
}

/* 确保角色名称与radio圆点水平对齐 */
.role-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  line-height: 20px;
  height: 20px;
}

.role-name {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  line-height: 20px;
  height: 20px;
  display: flex;
  align-items: center;
}

.role-card:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}





.customer-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.customer-name {
  font-weight: 500;
}

.customer-code {
  font-size: 12px;
  color: #909399;
}

.confirm-section {
  padding: 20px;
}

.confirm-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.confirm-title .el-icon {
  color: #67c23a;
}

.confirm-value {
  font-weight: 500;
  color: #333;
}

.confirm-tips {
  margin-top: 30px;
}

.step-actions {
  border-top: 1px solid #ebeef5;
  padding: 20px 0;
  text-align: center;
}

.step-actions .el-button {
  margin: 0 10px;
  min-width: 100px;
}

.preview-card,
.help-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.user-preview {
  text-align: center;
}

.preview-avatar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
  margin-bottom: 15px;
}

.preview-info h4 {
  margin: 10px 0 5px;
  color: #333;
  font-size: 16px;
}

.preview-username {
  color: #909399;
  margin: 5px 0;
  font-size: 12px;
}

.preview-role {
  color: #409eff;
  font-weight: 600;
  margin: 5px 0;
}

.preview-tags {
  margin: 10px 0;
}

.preview-tags .el-tag {
  margin: 2px;
}

.help-content {
  font-size: 13px;
}

.help-step h5 {
  margin: 0 0 10px;
  color: #333;
  font-size: 14px;
}

.help-step ul {
  margin: 0;
  padding-left: 20px;
}

.help-step li {
  margin: 5px 0;
  color: #666;
}



/* 响应式设计 */
@media (max-width: 768px) {
  .user-create {
    padding: 10px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 15px;
  }
  
  .header-steps {
    width: 100%;
  }
  
  .step-actions .el-button {
    margin: 5px;
    min-width: 80px;
  }
}

/* 动画效果 */
.el-card {
  transition: all 0.3s ease;
}

.el-card:hover {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.form-section {
  transition: all 0.3s ease;
}

.form-section:hover {
  background: #f0f2f5;
}

.step-content {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 头像上传样式 */
.avatar-upload {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.avatar-uploader {
  display: inline-block;
}

.avatar-placeholder {
  width: 60px;
  height: 60px;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.avatar-placeholder:hover {
  border-color: #409eff;
  color: #409eff;
}

.avatar-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  margin-bottom: 4px;
}

.upload-text {
  font-size: 10px;
  color: #8c939d;
  text-align: center;
  line-height: 1.2;
}

.avatar-preview {
  cursor: pointer;
  border: 2px solid #e4e7ed;
  transition: border-color 0.3s ease;
}

.avatar-preview:hover {
  border-color: #409eff;
}

.avatar-tips {
  color: #909399;
  font-size: 12px;
  line-height: 1.5;
}

.avatar-tips p {
  margin: 2px 0;
}
</style>
